<template>
  <el-dialog
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :title="rule2DialogTitle"
    append-to-body
    top="1"
    width="60%"
    @close="doClose"
  >
    <div class="app-container">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="el-icon-search" />搜索栏
          </template>
          <div class="head-container">
            <el-form class="searchform" :model="params" :inline="true" size="mini" label-width="auto" @keyup.enter.native="toQuery">
              <el-form-item label="表单名称:">
                <el-select v-model="params.sheetVariableName" placeholder="请选择" style="width: 180px;" size="mini">
                  <el-option v-for="item in sheetNames" :key="item.value" :label="item.name" :value="item.value" clearable />
                </el-select>
              </el-form-item>
              <el-form-item label="规则业务类型:">
                <el-select v-model="params.jobType" placeholder="请选择规则业务类型" clearable style="width: 180px;" size="mini">
                  <el-option
                    v-for="item in parent.parent.parent.ruleApplyTypes"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="外挂清单名:">
                <el-select v-model="params.pluginListSite" placeholder="请选择外挂清单" clearable style="width: 180px;" size="mini">
                  <template v-for="item in options">
                    <el-tooltip :key="item.id" class="item" effect="light" :content="item.desciption" placement="right">
                      <el-option
                        :key="item.id"
                        :label="item.listName"
                        :value="item.id"
                      />
                    </el-tooltip>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item label="规则编号:">
                <el-input v-model="params.id" placeholder="输入Excel对应的列搜索" clearable style="width: 180px;" size="mini" />
              </el-form-item>
              <el-form-item label="Excel列号:">
                <el-input v-model="params.rowSite" placeholder="输入Excel对应的列搜索" clearable style="width: 180px;" size="mini" />
              </el-form-item>
              <el-form-item label="Excel列名:">
                <el-input v-model="params.rowName" placeholder="输入Excel对应的列名搜索" clearable style="width: 180px;" size="mini" />
              </el-form-item>
              <el-form-item>
                <el-button size="mini" style="float:right;margin-left:0px;" type="primary" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
                <el-button size="mini" style="float:right;margin-left:0px;" type="primary" icon="el-icon-search" round @click="toQuery">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div style="padding-top:5px">
        <el-table
          ref="rule2ListTabel"
          :data="data"
          :row-key="getRowKeys"
          :height="tableHeight"
          stripe
          size="small"
          border
          style="width: 100%;"
          @row-click="rowClick"
          @row-dblclick="doSave"
          @select="select"
          @header-dragend="colChange"
        >
          <el-table-column :reserve-selection="true" type="selection" align="center" width="55" fixed="left" />
          <el-table-column :show-overflow-tooltip="true" label="规则编号" prop="id" width="85" fixed="left" />
          <el-table-column :show-overflow-tooltip="true" label="表单名称" prop="sheetName" :width="colWidths.sheetName">
            <template slot-scope="scope">
              <span>{{ sheetName(scope.row.sheetVariableName) }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="Excel列号" prop="rowSite" :width="colWidths.rowSite" />
          <el-table-column :show-overflow-tooltip="true" label="Excel列名" prop="rowName" :width="colWidths.rowName" />
          <el-table-column :show-overflow-tooltip="true" label="规则业务类" prop="jobType" :width="colWidths.jobType">
            <template slot-scope="scope">
              <span>{{ businessType(parent.parent.parent.ruleApplyTypes, scope.row.businessTypeIds) }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="外挂清单名" prop="listName" :width="colWidths.listName" />
          <el-table-column :show-overflow-tooltip="true" label="对比列" prop="contrastRowSite" :width="colWidths.contrastRowSite" />
          <el-table-column :show-overflow-tooltip="true" label="备注" prop="remark" :width="colWidths.remark" />
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page.sync="currentPage"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="1" :offset="9"><div><el-button type="primary" size="small" round @click="doClose()">取消</el-button></div></el-col>
      <el-col :span="1" :offset="3"><div><el-button type="primary" size="small" round @click="doSave()">确定</el-button></div></el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { initRule2List } from '@/api/rule2'
import initServiceData from '@/utils/initServiceData'
import { findRuleSheetNames } from '@/api/rule3'
import { businessType } from '@/utils/ruleUtil'

export default {
  mixins: [initServiceData],
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      activeName: '1',
      rule2DialogTitle: '',
      options: [],
      selectedRow: null,
      optionsJobType: [{ value: '新品创建', label: '新品创建' }, { value: '商品维护', label: '商品维护' }],
      sheetNames: [{ name: '', value: null }],
      tableHeight: window.innerHeight * 0.58
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doLayout()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.loadSheetNames()
    })
  },
  methods: {
    businessType,
    doLayout() {
      if (this.$refs.rule2ListTabel) {
        this.$refs.rule2ListTabel.doLayout()
      }
    },
    beforeInit() {
      this.url = '/rules/queryRule004All'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      this.show = false
      return true
    },
    resetForm() {
      this.params = { rowSite: '', rowName: '' }
    },
    toQuery() {
      initRule2List(this.params).then(res => {
        this.data = res.data
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    select(selection, row) {
      this.rowClick(row)
    },
    rowClick(row) {
      this.selectedRow = row
      this.$refs.rule2ListTabel.clearSelection(this.multipleSelection)
      this.$refs.rule2ListTabel.toggleRowSelection(row, true)
    },
    formatIs(row, column) {
      return row.isAllowCommit === '1' ? '是' : '否'
    },
    sheetName(sheetVariableName) {
      for (var i = 0; i < this.sheetNames.length; i++) {
        if (this.sheetNames[i].value === sheetVariableName) {
          return this.sheetNames[i].name
        }
      }
      return sheetVariableName
    },
    loadSheetNames() {
      findRuleSheetNames().then(res => {
        this.sheetNames = res.result
      })
    },
    // 关闭
    doClose() {
      this.dialog = false
      this.selectedRow = null
      this.$refs.rule2ListTabel.clearSelection(this.multipleSelection)
    },
    // 确定
    doSave() {
      // console.log('doSave:' + JSON.stringify(this.selectedRow))
      var _this = this
      if (this.selectedRow === null) {
        this.$confirm('请选择外部条件!', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        })
      } else {
        _this.parent.setRule2(this.selectedRow)
        _this.dialog = false
        _this.selectedRow = null
        _this.$refs.rule2ListTabel.clearSelection(this.multipleSelection)
      }
    }
  }
}
</script>
